easyUI 您所在的位置:网站首页 easyui form validate easyUI

easyUI

2023-07-24 09:04| 来源: 网络整理| 查看: 265

easyUI表单验证,主题:

1. 数据格式验证(easyUI已封装几个常用验证,例如:email、URL、length,另外,提供了可扩展接口,更多的验证自己定义即可)

2. 远程校验(需要和后台交互的校验),这个涉及到easyUI校验的触发机制。

3. 表单提交时的校验

easyUI的验证,定义input标签的class=“easyui-validatebox”,验证在dataoptions属性中。先看一段简单的代码:

验证用户名为必填字段:

验证登录名必填且长度为1—5之间:

自定义校验格式:easyUI提供了email、length、URL几个常用的验证,更多的校验,可以自己定义,例如,要验证密码长度为6,自定义方式如下:

$.extend($.fn.validatebox.defaults.rules,{ minLength:{ validator:function(value,param){ return value.length=param[0]; }, message:"{1}" } })

 扩展的自定义方法中,校验失败时的输出信息,可以是页面中定义的参数。

easyUI的远程校验,不建议采用。因为easyUI验证的触发,不是通过事件触发,而是设置了一个定时器,这个定时器在文本框获取焦点时启动,直到失去焦点时停止,默认是每个200毫秒校验一次,时间一到,不管值是否改变,都会再校验一次。所以,像这种需要和后台交互的验证,不建议使用该方式。我的思路是这样的:在标签的onblure()事件中请求后台,在页面定义一个标签显示校验结果,并将该标签的样式设置成easyUI提示信息的样式。为了更加通用,可以封装一个公共的js方法,参数包括url、参数、接收返回信息的标签id等等。

最后是表单提交,提交前需要判断所有的校验项是否全部校验成功,若有未通过校验项,不允许提交表单。目前,我用了两种实现方式:

function add(){ var str = $(".validatebox-text.validatebox-invalid:first"); if(str.val()!=null){ alert("请检查带有警告的数据"); return; }

或者

if($("#addUserForm").form("validate")){……}



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有